<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 创建一个根标签  -->
    <div id="root"></div>

    <!-- 2. 引入react库文件和babel 
    注意: 先引入react后引入react-dom. 因为react-dom依赖react
    -->
    <script crossorigin src="./js/react.development.js"></script>
    <script crossorigin src="./js//react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <!-- 3. 根据数据动态创建元素,最后渲染到页面上 -->
    <!-- type="text/babel" 作用: 让babel编译这个script里面的代码. 会将jsx编译成 React.createElement -->
    <script type="text/babel">
      const div = (
        <div>
          <button
            onClick={function fn(e) {
              // console.log(e) // 在react中接收到的是合成事件(平时还叫事件对象)
              // 合成事件其实就是对于原生事件对象的包装(坚决了事件对象的兼容性问题)
              // 但是使用时和原来的事件对象是一样的
              console.log(e)
              e.persist()
              // react中事件处理函数的this指向undefined. 因为我们定义的函数,不是真正的事件处理函数.在react内部是用apply调用的.按理this应该指向window.但是我们的代码被babel编译,所以开启严格模式,最终this指向undefined
              console.log(this)
            }}
            // onMouseEnter={function () {
            //   console.log('触发了mouseenter')
            // }}
          >
            按钮
          </button>
        </div>
      )
      ReactDOM.render(div, document.getElementById('root'))

      // react内部注册事件的伪代码:
      btn的真实dom.addEventListener(
        'click',
        function (e) {
          fn.apply()
        },
        false
      )
    </script>
  </body>
</html>
